<template>
	<view>
		<view class="u-m-30" v-if="show">
			<view class="u-card-box u-m-t-30 u-p-t-0 u-p-b-0">
				<u-collapse :head-style="headStyle" v-if="data.user.id == user_id">
					<u-collapse-item :title="item.head" v-for="(item, index) in collapseList" :key="index"
						:open="item.open">
						<view class="u-flex u-border-top u-col-top u-p-t-30 u-p-b-30">
							<!-- <view class="u-flex u-width-100" v-if="data.user.id == user_id">
								<view class="sign_box">
									<image class="sign_image"
										src="https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20240902761454392066.png"
										mode="widthFix" @click="previewPoster(1)"></image>
									<view class="u-font-bold" style="color:#4586C2">第一步</view>
									<view class="u-m-t-5 u-color-black">扫码签到</view>
								</view>
								<view class="promoter_box u-flex-1 u-flex u-row-between u-m-l-20 u-flex-wrap">
									<view class="promoter_tool" :class="[4,5,6].includes(item.id) ? 'u-m-t-20' :''"
										v-for="(item,index) in list" :key="item.id"
										:style="'background-image: url('+item.image+')'" @click="openTool(item.id)">
										<view class="u-m-t-40 u-font-bold" :style="'color: '+item.color+''">
											{{item.name}}</view>
										<view class="u-m-t-5 u-color-black">{{item.desc}}</view>
									</view>
								</view>
							</view> -->
							<view class="promoter_box u-flex-1 u-flex u-flex-wrap">
								<view class="promoter_tool_new" :class="[4,5,6,7].includes(index) ? 'u-m-t-20' :''"
									v-for="(item,index) in list" :key="item.id"
									:style="'background-image: url('+item.image+')'" @click="openTool(item.id)">
									<view class="u-m-t-45 u-font-bold" :style="'color: '+item.color+''">
										{{item.name}}</view>
									<view class="u-m-t-5 u-color-black">{{item.desc}}</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
				<u-collapse :head-style="headStyle" v-if="data.is_sign == 1">
					<u-collapse-item :title="item.head" v-for="(item, index) in collapseList" :key="index"
						:open="item.open">
						<view class="u-flex u-border-top u-col-top u-p-t-30 u-p-b-30">
							<view class="sign_tool">
								<view class="tool_box" v-for="(item,index) in signList" :key="item.id"
									:style="'background-image: url('+item.image+')'" @click="openTool(item.id)">
									<view class="u-m-t-40 u-font-bold" :style="'color: '+item.color+''">{{item.name}}
									</view>
									<view class="u-m-t-5 u-m-b-10">{{item.desc}}</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["isPromoter", "toolList", "data","toolShow"],
		data() {
			return {
				show: this.toolShow,
				list: this.toolList,
				collapseList:[{
					head:"酒局小工具",
					body: "",
					open: true
				}],
				headStyle: {
					color: '#B3723E',
					fontSize: '30rpx',
					fontWeight: 'bold'
				},
				user_id: uni.getStorageSync("user_id"),
				signList: [
					{
						id: 3,
						name: '转换能量',
						desc: '我的推荐',
						color: '#555294',
						image: 'https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20240914173185594916.png'
					},
					/* {
						id: 4,
						name: '互帮互助',
						desc: '我的任务',
						color: '#555294',
						image: 'https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20240914536388471923.png'
					}, */
					{
						id: 5,
						name: '酒局复盘',
						desc: '来友评价',
						color: '#555294',
						image: 'https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20240914937488638131.png'
					}/* ,
					{
						id: 7,
						name: '国学智慧',
						desc: '智慧人生',
						color: '#555294',
						image: 'https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20240914937488638131.png'
					} */
				],
			}
		},
		watch: {
			toolList: {
				handler(val) {
					this.list = val
				},
				deep: true
			},
			toolShow: {
				handler(val) {
					this.show = val
				},
				deep: true
			}
		},
		methods: {
			previewPoster(type) {
				this.$emit("previewPoster", type)
			},
			openTool(index) {
				if(index == 0){
					this.$emit("previewPoster", 1)
				}else{
					this.$emit("openTool", index)
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tool_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		margin: 0 10rpx;
		border-radius: 10rpx;
		padding-left: 10rpx;
		background-size: 100% 100%;
	}
	
	.sign_tool {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	
	.sign_box {
		background-image: linear-gradient(1deg, #d9ebfc 0%, #f3f9fe 100%);
		background-size: cover;
		text-align: center;
		height: 300rpx;
		width: 200rpx;
		border-radius: 10rpx;

		.sign_image {
			width: 180rpx;
			height: 180rpx !important;
			padding: 20rpx 10rpx 0 10rpx;
		}
	}

	.promoter_box {
		height: 300rpx;

		.promoter_tool {
			padding: 10rpx;
			background-size: cover;
			border-radius: 10rpx;
			font-size: 26rpx;
			width: 30%;
			height: 140rpx;
		}
		
		.promoter_tool_new {
			padding: 10rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
			width: 21%;
			height: 140rpx;
			background-size: cover;
			margin-left: 20rpx;
		}
	}
	
	.promoter_box::after{
		// width: 23%;
		flex: 1;
		content: "";
		margin-left: 20rpx;
	}
</style>